<template>
  <div class="member-level-icon" :class="['member-level-icon-'+this.$props.level,$props.isVip?'has-vip':'no-vip']" @click="showLevelInfo">
    <img :src="levelArr[this.$props.level].icon" :class="{'huise':!$props.isVip}">
    <span v-text="levelArr[this.$props.level].name"></span>
  </div>
</template>

<script>

export default {
  name: 'MemberLevelIcon',
  props:{
    level:Number,
    isVip:Number,
    showType:Number,
  },
  mounted () {
    console.log('isVip',this.$props.isVip)
  },
  data:function () {
    return {
      levelArr:dict.VipLevelList
    }
  },
  methods:{
    showLevelInfo:function () {
      if (!this.$props.showType){
        this.bus.$emit('LevelInfoDialogCallBus',this.$props.level)
      }else{
        this.$router.push('/MemberVipHome')
      }
    }
  }
}
</script>

<style>
  .member-level-icon{ display: inline-block; padding: 0px 2px; padding-right: 4px; background: rgba(220,220,220,.8); border-radius: 4px;color: #444444; line-height: 17px}
  .member-level-icon>img{ display: inline-block; height: 18px; width: 18px; position: relative; top: 1px}
  .member-level-icon>span{  position: relative; top: -2px}

  .member-level-icon-1{background: #ffcfbb;color: #934835;}
  .member-level-icon-2{background: #fadfa9;color: #775024;}
  .member-level-icon-3{background: #e1d166;color: #934835;}

  .member-level-icon.has-vip{}
  .member-level-icon.no-vip{background: #BEBEBE;}
</style>
